<template>
  <div>slot
    <!-- 匿名插槽 :没有名字的,传入组件所有的东西.都展示在这里
    具名插槽
    作用域插
import { useLink } from 'vue-router/types/composables';
槽 -->

    <!-- <template v-slot:header="scope"> -->
    <Dialog>
      <template #suming="scope">
        <ul>
          <li v-for="item in scope.animal">{{ item.name }}</li>
        </ul>
      </template>
      <template v-slot:footer>

        <h1>模态框底部</h1>
      </template>
      <h1 slot="context">模态框内容</h1>
    </Dialog>
    mixin的使用==============
    主要是为了实现复用,可以把vue中的所有的属性,提取到mixin里面去,
    名字相同的时候,它有对应的覆盖规则
    如果是data属性同名,是组件的覆盖mixin的;
    属性值是对象的,是组件的覆盖mixin的 比方说filter computed components,directives
    生命周期.是先执行mixin的再执行组件的
    watch过滤器是和声明周期一致
    <h3>{{ names }}</h3>
    {{ queryParams }}
    <input type="text" v-model="num"> {{ num | newNum }}
  </div>
</template>

<script>
import Dialog from "./dialog.vue"
import myMixin from "../mixins/index"
export default {
  mixins: [myMixin],
  components: { Dialog },
  props: {},
  data () {
    return {
      queryParams: {
        limit: 15
      },
      num: 100
    }
  },
  computed: {
    newValue () {
      console.log("组件中的computed执行")
      return this.num
    }
  },
  methods: {
    getInit () {
      console.log("组件中getInit");
    }
  },
  filters: {
    newNum (value) {
      console.log("组件中过滤器");

      return value * 1 + 100
    }
  },
  watch: {
    num (value) {
      console.log("组件中watch");

    }
  },
  created () {
    console.log("组件中生命周期");

  },
  mounted () {

  },
}
</script>
<style scoped></style>